<template>
	<view class="container">
		<uni-section title="会员信息登记表" type="line">
			<view class="example">
				<uni-forms ref="form" :modelValue="formData" :rules="rules">
					<!-- 基本信息 -->
					<uni-forms-item label="姓名" required name="name">
						<uni-easyinput v-model="formData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="性别" required name="sex">
						<uni-data-checkbox v-model="formData.sex" :localdata="sexOptions" />
					</uni-forms-item>
					<uni-forms-item label="生日" required name="shengri">
						<uni-datetime-picker type="date" v-model="formData.shengri" />
					</uni-forms-item>
					<uni-forms-item label="属相" required name="shuxiang">
						<uni-easyinput v-model="formData.shuxiang" placeholder="请输入属相" />
					</uni-forms-item>
					<uni-forms-item label="身高" required name="shengao">
						<uni-easyinput v-model="formData.shengao" placeholder="请输入身高(cm)" />
					</uni-forms-item>
					<uni-forms-item label="体重" required name="tizhong">
						<uni-easyinput v-model="formData.tizhong" placeholder="请输入体重(kg)" />
					</uni-forms-item>
					<uni-forms-item label="学历" required name="xueli">
						<uni-data-checkbox v-model="formData.xueli" :localdata="xueliOptions" />
					</uni-forms-item>
					<uni-forms-item label="民族" name="minzu">
						<uni-easyinput v-model="formData.minzu" placeholder="请输入民族" />
					</uni-forms-item>
					<uni-forms-item label="婚姻状况" required name="hunyin">
						<uni-data-checkbox v-model="formData.hunyin" :localdata="hunyinOptions" />
					</uni-forms-item>

					<!-- 资产情况 -->
					<uni-forms-item label="是否有车" name="che">
						<switch :checked="formData.che" @change="formData.che = !formData.che" />
					</uni-forms-item>
					<uni-forms-item label="是否有车贷" name="chedai">
						<switch :checked="formData.chedai" @change="formData.chedai = !formData.chedai" />
					</uni-forms-item>
					<uni-forms-item label="是否有房" name="fang">
						<switch :checked="formData.fang" @change="formData.fang = !formData.fang" />
					</uni-forms-item>
					<uni-forms-item label="是否有房贷" name="fangdai">
						<switch :checked="formData.fangdai" @change="formData.fangdai = !formData.fangdai" />
					</uni-forms-item>
					<uni-forms-item label="是否进店" name="isin">
						<switch :checked="formData.isin" @change="formData.isin = !formData.isin" />
					</uni-forms-item>
					<uni-forms-item label="是否会员" name="vip">
						<switch :checked="formData.vip" @change="formData.vip = !formData.vip" />
					</uni-forms-item>

					<uni-forms-item label="vip时间" required name="vipdate">
						<uni-datetime-picker type="date" v-model="formData.vipdate" />
					</uni-forms-item>


					<uni-forms-item label="收入情况" required name="shouru">
						<uni-easyinput v-model="formData.shouru" placeholder="请输入收入情况" />
					</uni-forms-item>

					<!-- 家庭情况 -->
					<uni-forms-item label="父母情况" name="fumu">
						<uni-easyinput type="textarea" v-model="formData.fumu" placeholder="请描述父母情况" />
					</uni-forms-item>
					<uni-forms-item label="兄弟姐妹" name="jiemei">
						<uni-easyinput type="textarea" v-model="formData.jiemei" placeholder="请描述兄弟姐妹情况" />
					</uni-forms-item>
					<uni-forms-item label="子女情况" name="zinv">
						<uni-easyinput type="textarea" v-model="formData.zinv" placeholder="请描述子女情况" />
					</uni-forms-item>

					<!-- 其他信息 -->
					<uni-forms-item label="工作情况" name="gongzuo">
						<uni-easyinput type="textarea" v-model="formData.gongzuo" placeholder="请描述工作情况" />
					</uni-forms-item>
					
					<uni-forms-item label="房贷月供信息" name="gongzuo">
						<uni-easyinput type="textarea" v-model="formData.yuegong" placeholder="请描述房贷月供信息" />
					</uni-forms-item>
					<uni-forms-item label="保险信息资料" name="gongzuo">
						<uni-easyinput type="textarea" v-model="formData.baoxian" placeholder="请描述险信息资料" />
					</uni-forms-item>
					<uni-forms-item label="兴趣爱好" name="gongzuo">
						<uni-easyinput type="textarea" v-model="formData.xingqu" placeholder="请描述兴趣爱好" />
					</uni-forms-item>
					
					<uni-forms-item label="择偶要求" name="yaoqiu">
						<uni-easyinput type="textarea" v-model="formData.yaoqiu" placeholder="请描述择偶要求" />
					</uni-forms-item>
					<uni-forms-item label="联系方式" required name="lianxi">
						<uni-easyinput v-model="formData.lianxi" placeholder="请输入联系方式" />
					</uni-forms-item>
					<uni-forms-item label="照片" name="fileLists1">
						<uni-file-picker v-model="formData.fileLists1" @select="onFileSelectAndUpload('1', $event)"
							fileMediatype="image" limit="1" />
					</uni-forms-item>
					<uni-forms-item label="身份证" name="fileLists2">
						<uni-file-picker v-model="formData.fileLists2" @select="onFileSelectAndUpload('2', $event)"
							fileMediatype="image" limit="1" />
					</uni-forms-item>
					<uni-forms-item label="户口本" name="fileLists3">
						<uni-file-picker v-model="formData.fileLists3" @select="onFileSelectAndUpload('3', $event)"
							fileMediatype="image" limit="1" />
					</uni-forms-item>
					<uni-forms-item label="离婚证" name="fileLists4">
						<uni-file-picker v-model="formData.fileLists4" @select="onFileSelectAndUpload('4', $event)"
							fileMediatype="image" limit="1" />
					</uni-forms-item>
					<uni-forms-item label="其他照片" name="fileLists5">
						<uni-file-picker v-model="formData.fileLists5" @select="onFileSelectAndUpload('5', $event)"
							fileMediatype="image" limit="1" />
					</uni-forms-item>

					<view class="button-group">
						<button type="primary" v-if="status == 0" @click="submitForm">提交增加</button>
						<button type="primary" v-if="status == 1" @click="submitForm1">提交修改</button>
						<button type="default" @click="resetForm">重置</button>
					</view>
				</uni-forms>
			</view>
		</uni-section>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			console.log(options); // { id: "123", name: "张三" }
			if (options.id != null) {
				this.status = 1
				this.id = options.id
				this.getinfo(options.id)
			}

		},
		data() {
			return {
				id:0,
				status:0,
				formData: {
					name: '',
					sex: 0,
					shengri: '',
					vipdate: '',
					shuxiang: '',
					shengao: '',
					tizhong: '',
					xueli: '',
					minzu: '',
					hunyin: '0',
					che: false,
					chedai: false,
					fang: false,
					fangdai: false,
					vip: false,
					shouru: '',
					fumu: '',
					jiemei: '',
					zinv: '',
					gongzuo: '',
					isin: false,
					yaoqiu: '',
					yuegong:'',
					baoxian:'',
					xingqu:'',
					
 
					fileLists1: [{
						url: '',
					 
					}],
					fileLists2: [{
						url: '',
						 
					}],
					fileLists3: [{
						url: '',
						 
					}],
					fileLists4: [{
						url: '',
						 
					}],
					fileLists5: [{
						url: '',
						 
					}]

				},
				uploadStatus: {
					photo1: '' // uploading | success | error
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					lianxi: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式'
						}]
					},
					shengri: {
						rules: [{
							required: true,
							errorMessage: '请选择生日'
						}]
					}
				},
				sexOptions: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 0
				}],
				hunyinOptions: [{
						text: '未婚',
						value: '0'
					}, {
						text: '离异',
						value: '1'
					}, {
						text: '丧偶',
						value: '2'
					},
					{
						text: '短婚未育',
						value: '3'
					}
				],
				xueliOptions: [{
					text: '高中',
					value: '高中'
				}, {
					text: '专科',
					value: '专科'
				}, {
					text: '本科',
					value: '本科'
				}, {
					text: '研究生',
					value: '研究生'
				}],
				shouruOptions: [{
					text: '5k以下',
					value: '5k以下'
				}, {
					text: '5k-10k',
					value: '5k-10k'
				}, {
					text: '10k-20k',
					value: '10k-20k'
				}, {
					text: '20k以上',
					value: '20k以上'
				}]
			}
		},
		methods: {
			submitForm1(){
				
				this.$http({
					url: '/addinfo1?id=' + this.id ,
					method: 'post',
					header: {
						'content-type': 'application/json', // 默认值
						'Authorization': 'Bearer ' + uni.getStorageSync('token'),
					},
					data: this.formData
				}).then(res => {
					if (res.data.code == 10000) {
						console.log('提交成功:', res.data);
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						this.resetForm();
						uni.reLaunch({
							url: '/pages/users/users'
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}

				})
			},
			getinfo(e) {
				this.$http({
					url: '/phone/getinfo?id=' + e,
				}).then(res => {
					console.log('提交成功:', res.data);
					// this.formData = res.data.data
					this.formData.sex = res.data.data.sex == 1 ? 1 : 0
					this.formData.fileLists1[0].url = res.data.data.image
					this.formData.fileLists2[0].url = res.data.data.image1
					this.formData.fileLists3[0].url = res.data.data.image2
					this.formData.fileLists4[0].url = res.data.data.image3
					this.formData.fileLists5[0].url = res.data.data.image4
					// this.formData.photo1 = res.data.data.image
					this.formData.name = res.data.data.name
					this.formData.shengri = res.data.data.shengri
					this.formData.shengao = res.data.data.shengao
					this.formData.tizhong = res.data.data.tizhong
					this.formData.xueli = res.data.data.xueli
					this.formData.minzu = res.data.data.minzu
					this.formData.hunyin = res.data.data.hunyin
					this.formData.che = res.data.data.che == 1 ? true : false
					this.formData.chedai = res.data.data.chedai == 1 ? true : false
					this.formData.fang = res.data.data.fang == 1 ? true : false
					this.formData.fangdai = res.data.data.fangdai == 1 ? true : false
					this.formData.vip = res.data.data.vip == 1 ? true : false
					
					
					
					this.formData.shouru = res.data.data.shouru
					this.formData.fumu = res.data.data.fumu
					this.formData.jiemei = res.data.data.jiemei
					this.formData.zinv = res.data.data.zinv
					this.formData.gongzuo = res.data.data.gongzuo
					this.formData.isin = res.data.data.isin == 1 ? true : false
					this.formData.yaoqiu = res.data.data.yaoqiu
					this.formData.lianxi = res.data.data.lianxi
					this.formData.vipdate = res.data.data.vipdate
					this.formData.shuxiang = res.data.data.shuxiang
					this.formData.yuegong = res.data.data.yuegong
					this.formData.baoxian = res.data.data.baoxian
					this.formData.xingqu = res.data.data.xingqu
					// this.formData = res.data.data

				})
			},
			submitForm() {
				this.$refs.form.validate().then(res => {
					console.log(this.formData)
					this.addinfo()
				}).catch(err => {
					console.log('表单错误：', err);
				});
			},
			addinfo() {
 
				this.$http({
					url: '/addinfo',
					method: 'post',
					header: {
						'content-type': 'application/json', // 默认值
						'Authorization': 'Bearer ' + uni.getStorageSync('token'),
					},
					data: this.formData
				}).then(res => {
					if (res.data.code == 10000) {
						console.log('提交成功111:', res.data);
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						this.resetForm();
						uni.reLaunch({
							url: '/pages/users/users'
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				})

			},
			resetForm() {
				this.$refs.form.clearValidate();
				Object.keys(this.formData).forEach(key => {
					if (key.startsWith('fileLists')) {
						this.formData[key] = [{ url: '' }];
					} else if (typeof this.formData[key] === 'boolean') {
						this.formData[key] = false;
					} else {
						this.formData[key] = '';
					}
				});
			},
			async onFileSelectAndUpload(fieldName, { tempFiles }) {
				if (!tempFiles || tempFiles.length === 0) return;

				// 确保数组元素存在
				if (!this.formData[`fileLists${fieldName}`][0]) {
					this.formData[`fileLists${fieldName}`][0] = {};
				}

				const file = tempFiles[0];
				this.uploadStatus[fieldName] = 'uploading';
				const serverUrl = await this.uploadFile(file);

				console.log(123, serverUrl)

				if (fieldName == 1) {
					this.formData.fileLists1[0].url = serverUrl
				}
				if (fieldName == 2) {
					this.formData.fileLists2[0].url = serverUrl
				}
				if (fieldName == 3) {
					this.formData.fileLists3[0].url = serverUrl
				}
				if (fieldName == 4) {
					this.formData.fileLists4[0].url = serverUrl
				}
				if (fieldName == 5) {
					this.formData.fileLists5[0].url = serverUrl
				}

				this.uploadStatus[fieldName] = 'success';
				uni.showToast({
					title: '上传成功',
					icon: 'success'
				});
				
				console.log(this.formData)

			},
			uploadFile(file) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://yl.v0315.com/upload', // 替换为你的上传接口
						filePath: file.path,
						name: 'file', // 后端接收的字段名
						header: {
							'Authorization': 'Bearer ' + uni.getStorageSync('token'),
						},

						// formData: {
						// 	userId: '123'
						// }, // 附加参数
						success: (res) => {
							const data = JSON.parse(res.data); // 假设接口返回JSON					 
							resolve(data.data); // 返回服务器文件地址
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 2px;
		background-color: #fff;
	}

	.button-group {
		margin-top: 2px;
		display: flex;
		justify-content: space-around;
		font-size: 12px;

		button {
			width: 35%;
			font-size: 12px;
		}
	}

	.container {
		margin: 20px;
		font-size: 12px;
	}

	.button-group {
		margin-top: 2px;
		display: flex;
		justify-content: space-around;
		font-size: 12px;

		button {
			width: 35%;
			font-size: 12px;
		}
	}

	.uni-forms-item {
		position: relative;
		display: flex;
		margin-bottom: 19px !important;
		flex-direction: row;
	}

	.uni-forms-item__label {
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: left;
		font-size: 10px !important;
		color: #606266;
		height: 36px;
		padding: 0 12px 0 0;
		vertical-align: middle;
		flex-shrink: 0;
		box-sizing: border-box;
	}
</style>